<!--
 * @Descripttion: 知识关系管理
 * @version: V1.0.0.0
 * @Author: Converted to Vue3 + TypeScript
 * @Date: 2025-10-14
-->
<template>
	<div class="knowledge-relationship-manage-page">
		<div class="manage-layout search-wrapper">
			<div class="title-wrapper">
				<span class="title">知识关系筛选</span>
			</div>
			<div class="content-wrapper">
				<div class="search-item">
					<span class="item-label">知识关系</span>
					<el-input
						class="item-input"
						v-model="queryObj.searchValue"
						placeholder="输入知识关系名搜索"
						clearable
						@change="onSearchHandle"
					/>
				</div>
				<div class="search-btn" @click="onSearchHandle">筛选</div>
			</div>
		</div>
		<div class="manage-layout data-wrapper">
			<div class="title-wrapper">
				<span class="title">知识关系列表</span>
			</div>
			<!-- 表格 -->
			<div class="table-wrapper">
				<el-table :data="tableData" stripe fit class="self-stripe-table" height="100%">
					<el-table-column type="selection" align="center" width="80px" />
					<el-table-column label="关系名称" align="left" min-width="20%">
						<template #default="{ row }">
							{{ row?.relationName ?? '--' }}
						</template>
					</el-table-column>
					<el-table-column label="关系类型" align="left" min-width="20%">
						<template #default="{ row }">
							{{ row?.example ?? '--' }}
						</template>
					</el-table-column>
					<el-table-column label="关系呈现" align="left" min-width="65%">
						<template #default="{ row }">
							<span v-html="row?.displayType ?? '--'"></span>
						</template>
					</el-table-column>
					<el-table-column label="关系描述" align="left" min-width="65%">
						<template #default="{ row }">
							<span v-html="row?.description ?? '--'"></span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage, ElInput } from 'element-plus';
import { getErrorMessage, getKnowledgeRelationshipListAPI } from '@/api/index';
import type { KnowledgeRelationshipItemType } from './KnowledgeRelationship.type';
/**
 * 查询通用词库数据
 */
const tableData = ref<KnowledgeRelationshipItemType[]>([]);
const queryObj = ref({
	searchValue: ''
});

const getKnowledgeRelationshipList = async (): Promise<void> => {
	try {
		const data = await getKnowledgeRelationshipListAPI({
			keyword: queryObj.value.searchValue
		});
		tableData.value = data.list;
	} catch (error) {
		ElMessage.error(getErrorMessage(error));
	}
};
// 模糊搜索
const onSearchHandle = (): void => {
	getKnowledgeRelationshipList();
};
onMounted(() => {
	getKnowledgeRelationshipList();
});
</script>

<style lang="scss" scoped>
.knowledge-relationship-manage-page {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.search-wrapper {
	.search-item {
		.item-input {
			width: 25rem;
		}
	}
}
</style>
